<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>

<body>
  <div class="movie-list-container">
    <div class="inner-container">
        <div class="movie-head">
          <text class="slogan">正在热映</text>
          <div class="more">
            <text class="more-text">更多></text>
          </div>
        </div>
        <ul class="movies-container">
            <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li>
            <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li>
            <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li>
        </div>
    </div>
  </div>
  
<style type="text/css">
.movie-list-container{
  background-color: #fff;
  display: flex;
  /* flex-direction: column; */
  border: 1px solid black;
}
.inner-container{
   margin: 0 auto 10px; 
  border: 1px solid black;
   
}
.movie-head{
  padding: 15px 10px 11px;
   display: flex;
  flex-direction: row;
  justify-content: space-between; 
  border: 1px dashed black;
}
.movie-img{
  width: 100px;
  height: 135px;
  padding-bottom: 10px;  
  background-color:#188eee;
  border: 1px dashed red;
}
.movie-title{
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px dashed blue;
}
.starsTemplate{
    display:block;
    width:80px;
    height:20px;
    background-color:#F0F;
}
.movies-container{
  display: flex;
  flex-direction: row;
}
.movies-container li{
  display: flex;
  flex-direction: column;
  padding: 0 11px;
}
</style>
</body>
</html>